<template>
  <div class="bigContainer">
    <!-- 头部购物车 -->
    <div class="cartHeader">
      <div class="title">购物车</div>
      <div class="right">
        <van-tag type="warning" class="discount" v-show="!isEdit">领券</van-tag>
        <div class="edit" v-show="!isEdit" @click="toEdit()">编辑</div>
        <div class="edit" v-show="isEdit" @click="toEdit()">完成</div>

      </div>
    </div>

    <!-- 通知栏 -->
    <van-notice-bar mode="link" class="noticeBar">自营仓商品,再购79.1元免邮</van-notice-bar>

    <!-- 商品列表 -->
    <van-swipe-cell v-for="item in cartInfoList" class="swipecell">
      <!-- 倒计时 -->
      <div class="limitTime">
        <van-tag plain type="warning">限时抢购中</van-tag>
        <span>距优惠结束</span>
        <van-count-down :time="time" />
      </div>

      <van-card
        :key="item.id"
        :price="item.skuPrice"
        :title="item.skuName"
        class="goods-card"
        :thumb="item.imgUrl"
      >
        <template #footer>
          <div class="chooseBtn" @click="handleCheck(item)" :class="item.isChecked == 1 ? 'checkbtnActive' : '' "></div>
        </template>
        <!-- 单个商品数量加减或者修改 -->
        <template #num>
          <div class="addOrsub">
              <div class="sub" @click="handleAddorSub(item,-1)">-</div>
              <input type="number" :value="item.skuNum" @keyup.enter="handleInput(item,$event)" @blur="handleInput(item,$event) " >
              <div class="add" @click="handleAddorSub(item,1)">+</div>
          </div>
        </template>
      </van-card>

      <!-- 右边删除部分 -->
      <template #right>
        <van-button square text="删除" type="danger" class="delete-button" @click="handleDeleteOneSku(item)" />
      </template>
    </van-swipe-cell>
    <!-- 购物车为空的时候 -->
    <van-empty
      class="custom-image"
      image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
      description="购物车空空~"
      v-if="emptyCart"
    />


    <!-- 底部占位空白块 -->
    <div class="empty"></div>

    <!-- 底部下单位置 -->
    <div class="payNow">

        <div class="left">
          <div class="checkAll" @click="handleAllChecked(cartInfoList)" :class="isAllChecked ? 'checkbtnActive' : '' "></div>
          已选({{isCheckedNum}})
          </div>
        <div class="right">
          <div class="price" v-show="!isEdit">
            <span class="total">合计：￥{{totalPrice}}</span>
            <span class="discont">已优惠:￥{{isCheckedNum*10}}</span>
          </div>
          <div class="pay"  v-if="!isEdit" @click="toOrder">下单</div>
          <div class="pay"  v-if="isEdit" @click="handleSomeSku">删除</div>
        </div>
   
    </div>

    <!-- 底部tabbar -->
    <tabBar :skuNum="addCartNum" />
  </div>
</template>

<script>
import { Empty } from 'vant';
import { getCartData,updateCartNumber,reqChangeChecked,reqCheckAllCart,reqDeletOneSku,reqDeleteSomeSku } from "@/api/Cart";
export default {
  name: "Cart",
  data() {
    return {
      cartInfoList: [],  //购物车列表数据
      radio: '', // 单选框点击
      time: 30 * 60 * 60 * 1000, //倒计时的time时长
      isEdit:false,      //是否进入编辑默认
    };
  },
  computed:{
    // 购物车所有商品的选中 和不选中状态  结果 是true  和false
    isAllChecked(){
      if(this.cartInfoList.length){
        return this.cartInfoList.every((item)=>{
        return  item.isChecked == '1'
      })
      }else{
        return false
      }
    },
    //已选商品数量
    isCheckedNum(){
      return  this.cartInfoList.reduce((pre,item)=>{
          if(item.isChecked == 1){
            pre+= item.skuNum
          }
          return pre
        },0)
    },
    // 合计商品总价
    totalPrice(){
      return  this.cartInfoList.reduce((pre,item)=>{
        if(item.isChecked == 1){
          pre += item.skuPrice * item.skuNum
        }
        return pre
      },0)
    },
    // 购物车是否为空
    emptyCart(){
      if(this.cartInfoList.length){
        return false
      }else{
        return true
      }
    },
    // 购物车中商品数量
    addCartNum(){
      
    return  this.cartInfoList.reduce((pre,item)=>{
        pre += item.skuNum
        return pre
      },0)
    }
  },
  methods: {
    // 点击去订单页
    toOrder(){
      // 看看商品列表里面是否有选中的
      let flag  = this.cartInfoList.some((item)=>{
       return item.isChecked == 1
      })
      // 有 跳转路由
      if(flag){
      this.$router.push('/order')

      }else{
        this.$toast('请至少选择一件商品，再下单哦')
      }
    },
    // 获取购物车列表数据
    async getCartList() {
      // 获取购物车列表的数据
      const result = await getCartData();
     
      if (result.code == 200) {
        // 请求的数据不为空 也就是用户给购物车添加了数据

        if (result.data.length) {
       
          this.cartInfoList = result.data[0].cartInfoList;
        } else {
          // 用户还没有向购物车里面添加进去数据  让它为空
          this.cartInfoList = [];
        }
      }
    },
    // 购物车数量加1 或者减1
   async handleAddorSub(item,num){
    // 如果
    let {skuNum,skuId} = item
   
    if(skuNum == 1 && num == -1){

      this.$toast('最少要买一件哦')
      return
    }
    const result = await updateCartNumber(skuId,num)
    if(result.code == 200 ){
      // 添加成功的话再获取一下购物车的列表数据
      this.getCartList()
    }
    },
    // 用户输入商品数量
   async handleInput(item,e){
      const {skuId,skuNum} = item
      let value = Math.floor(e.target.value)
      
      //如果用户输入的是负数 或者 0
      if(value<= 0){
        // 让value 为1
        value = 1
        this.$toast('最少的购买数量为1哦')
        let num1 = value - skuNum
      const result1 = await  updateCartNumber(skuId,num1)
      if(result1.code == 200){
        // 再次获取购物车列表数据
        this.getCartList()
      }else{
        this.$toast('修改购物车失败，请稍后再试~')
      }

      }else{
        let num = value - skuNum
         // 说明数量增加了发请求修改数据
      const result = await  updateCartNumber(skuId,num)
      if(result.code == 200){
        // 再次获取购物车列表数据
        this.getCartList()
      }else{
        this.$toast('修改购物车失败，请稍后再试~')
      }
      }
    
    },
    // 单个商品数量的修改
   async handleCheck(item){
      let {isChecked,skuId} = item
      isChecked = isChecked == 1 ? '0' : '1'
      // 发请求修改当前商品勾选状态
      const result = await reqChangeChecked(skuId,isChecked)
      if(result.code == 200){
        // 获取一下最新的购物车数据
        this.getCartList()
      }

    },
    // 批量选中购物车
   async handleAllChecked(cartInfoList,flag){
    //如果传进来flag  代表 进入编辑默认或者 退出编辑默认  没有flag是正常在购物车页勾选
    if(flag == 0){
       // 收集所有上商品的id 列表
      const arr = []
      cartInfoList.forEach((item)=>{
        arr.push(item.skuId)
      })
      // 发请求
      const result = await reqCheckAllCart(flag,arr)
      if(result.code ==  200){
        // 成功 再次获取购物车列表数据
        this.getCartList()
      }
    }else{
       let flag =   this.isAllChecked 
      // 如果现在是真  那么 所有改成0    否则 所有都是1
      flag = flag == true ? 0 : 1 
      // 收集所有上商品的id 列表
      const arr = []
      cartInfoList.forEach((item)=>{
        arr.push(item.skuId)
      })
      // 发请求
      const result = await reqCheckAllCart(flag,arr)
      if(result.code ==  200){
        // 成功 再次获取购物车列表数据
        this.getCartList()
      }

    }

   
    },
    //删除当前商品
    async handleDeleteOneSku (item) {
    const  result = await reqDeletOneSku(item.skuId)
    if(result.code == 200){
      this.$toast('删除成功')
      this.getCartList()
    }
    },
    //编辑和完成模式的切换
    toEdit(){
      this.isEdit = !this.isEdit
      // 进入编辑模式 让所有商品先不勾选
      if(this.isEdit == true){
        this.handleAllChecked(this.cartInfoList,0)
      }
    },
    // 删除部分商品  和所以商品
    async  handleSomeSku(){
      const arr = []
      this.cartInfoList.forEach((item)=>{
        if(item.isChecked == 1){
          arr.push(item.skuId)
        }
      })
       // 发请求  批量删除选中的商品
      const result = await reqDeleteSomeSku(arr)
      if(result.code == 200){
        // 发请求获取最新的列表数据
        this.getCartList()
      }
    },
    

  },
  mounted() {
    // 组件渲染发请求 获取购车列表数据
    this.getCartList();
  },
  
};
</script>

<style lang="less" scoped>
.bigContainer{

  // 设置购物车空空的高度
  /deep/.van-empty{
    padding: 100px 0;
  }
  background-color: #f4f4f4;
  font-size: 14px;
  //购物车头部部分
  .cartHeader{
    display: flex;
    padding: 15px 20px ;
    justify-content: space-between;
    font-size: 16px;
    .title{
      font-size: 18px;
    }
    .right{
      display: flex;
      /deep/.van-tag{
        top: -1px;
      }
      .edit{
      margin-left: 20px;

      }
    }
  }

  // 通知栏部分
  /deep/.van-notice-bar {
    height: 50px;
    font-size: 15px;
  }


  .goods-card {
  margin: 0;
  background-color: #fff;
  margin-bottom: 10px;
}

.delete-button {
  height: 100%;
}

.swipecell{
  position: relative;
  padding-left: 20px;
  background-color: #fff;
  margin-bottom: 10px;
}

// 每个商品的加减
.addOrsub{
  font-size: 20px;
  display: flex;
  .add, .sub{
    border: 1px solid #ccc;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
  }
  .sub{
    line-height: 17px;
  }
  input{
    border: 1px solid #ccc;
    display: inline-block;
    width: 40px;
    text-align: center;
    font-size: 16px;
  }
}

.chooseBtn{
  position: absolute;
  top: 43px;
  left: -12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.checkbtnActive{
  background-image: url('~@/assets/images/check.png');
  background-repeat: no-repeat;
  background-size:18px 18px ;
  border: none;
}
// 倒计时
.limitTime{
  margin-top: 10px;
  display: flex;
  line-height: 20px;
  font-size: 12px;
  height: 20px;
  span{
    margin: 0px 6px;
    line-height: 20px;
  }
}

// 底部下单位置
.payNow{
  position: fixed;
  bottom: 48px;
  left: 0;
  right: 0;
  padding-left: 20px;
  background-color: #fff;
  display: flex;
  height: 50px;
  width: 100%;
  justify-content: space-between;
  .left{
    color: #999;
    align-items: center;
    display: flex;
    .checkAll{
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid #ccc;
      margin-right: 10px;
    }
  }
  .right{
    display: flex;
    line-height: 50px;
    .pay{
      width: 100px;
      height: 100%;
      text-align: center;
      background-color: #de212a;
      line-height: 50px;
      color: #fff;
      font-size: 16px;
      margin-left: 6px;
    }
    .price{
      display: flex;
      font-size: 12px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .total{
        color: #de212a;
        line-height: 12px;
        margin-bottom: 6px;
      }
      .discont{
        color: #999;
        line-height: 12px !important;

      }
    }
  }
}

// 底部空白占位块
.empty{
  width: 100%;
  height: 98px;
  background-color: #fff;
}





}
</style>